<!doctype html>
<html>

<head>

	<!-- Basic -->
	<meta charset="UTF-8">

	<title>开始考试</title>
	<meta name="keywords" content="HTML5 Admin Template" />
	<meta name="description" content="JSOFT Admin - Responsive HTML5 Template">


	<!-- Mobile Metas -->
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

	<!-- Web Fonts  -->
	<link href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800|Shadows+Into+Light"
		rel="stylesheet" type="text/css">

	<!-- Vendor CSS -->
	<link rel="stylesheet" href="assets/vendor/bootstrap/css/bootstrap.css" />
	<link rel="stylesheet" href="assets/vendor/bootstrap-table-master/bootstrap-table.css" />
	<link rel="stylesheet" href="assets/vendor/font-awesome/css/font-awesome.css" />
	<link rel="stylesheet" href="assets/vendor/magnific-popup/magnific-popup.css" />
	<link rel="stylesheet" href="assets/vendor/bootstrap-datepicker/css/datepicker3.css" />

	<!-- Specific Page Vendor CSS -->
	<link rel="stylesheet" href="assets/vendor/select2/select2.css" />
	<link rel="stylesheet" href="assets/vendor/jquery-datatables-bs3/assets/css/datatables.css" />

	<!-- Theme CSS -->
	<link rel="stylesheet" href="assets/stylesheets/theme.css" />

	<!-- Skin CSS -->
	<link rel="stylesheet" href="assets/stylesheets/skins/default.css" />

	<!-- Theme Custom CSS -->
	<link rel="stylesheet" href="assets/stylesheets/theme-custom.css">

	<!-- Head Libs -->
	<script src="assets/vendor/modernizr/modernizr.js"></script>

</head>

<body>


	<div class="">
		<section role="main">
			<!-- start: page -->
			<section class="panel">
				<div class="panel-body">
					<p style="padding-top: 10px;">
						<strong>距离考试结束还有：</strong>03分钟33秒
						<a class="mb-xs mt-xs mr-xs modal-basic btn btn-primary" href="#submitexam"
							style="float: right;">
							<i class="fa fa-send" aria-hidden="true"></i> 提交考试</a>
						<!-- <button type="button" class="mb-xs mt-xs mr-xs btn btn-primary" style="float: right;"
								href="#submitexam">
								<i class="fa fa-send" aria-hidden="true"></i>
								提交考试
							</button> -->
					</p>
				</div>
			</section>
			<div class="row">
				<div class="col-md-9">
					<section class="panel">
						<header class="panel-heading">
							<div class="panel-actions">
								<a href="#" class="fa fa-caret-down"></a>
								<a href="#" class="fa fa-times"></a>
							</div>

							<h2 class="panel-title">试卷题目</h2>
						</header>
						<div class="panel-body">
							<h5>1.找出与众不同的一个：</h5>
							<div role="radiogroup" class="el-radio-group">
								<label role="radio" tabindex="0" class="el-radio">
									<span class="el-radio__input">
										<!-- <span class="el-radio__inner"></span> -->
										<input type="radio" aria-hidden="true" name="optradio" tabindex="-1"
											class="el-radio__original" value="">
									</span>
									<span class="el-radio__label">A.1</span>
								</label>
								<label role="radio" tabindex="-1" class="el-radio">
									<span class="el-radio__input">
										<!-- <span class="el-radio__inner"></span> -->
										<input type="radio" aria-hidden="true" name="optradio" tabindex="-1"
											class="el-radio__original" value="">
									</span>
									<span class="el-radio__label">B.1</span>
								</label>
								<label role="radio" tabindex="-1" class="el-radio">
									<span class="el-radio__input">
										<!-- <span class="el-radio__inner"></span> -->
										<input type="radio" aria-hidden="true" name="optradio" tabindex="-1"
											class="el-radio__original" value="">
									</span>
									<span class="el-radio__label">C.1</span>
								</label>
								<label role="radio" tabindex="-1" class="el-radio">
									<span class="el-radio__input">
										<!-- <span class="el-radio__inner"></span> -->
										<input type="radio" aria-hidden="true" name="optradio" tabindex="-1"
											class="el-radio__original" value="">
									</span>
									<span class="el-radio__label">D.1</span>
								</label>
							</div>
						</div>
					</section>
				</div>
				<div class="col-md-3">
					<section class="panel">
						<header class="panel-heading">
							<div class="panel-actions">
								<a href="#" class="fa fa-caret-down"></a>
								<a href="#" class="fa fa-times"></a>
							</div>

							<h2 class="panel-title">答题</h2>
						</header>
						<div class="panel-body">
							<div class="start-exam-div">
								<p>答题卡</p>
							</div>
							<button type="button" class="mb-xs mt-xs mr-xs btn btn-warning">1</button>
							<button type="button" class="mb-xs mt-xs mr-xs btn btn-warning">2</button>
							<button type="button" class="mb-xs mt-xs mr-xs btn btn-warning">3</button>
							<button type="button" class="mb-xs mt-xs mr-xs btn btn-warning">4</button>
						</div>
					</section>
				</div>
			</div>


			<a href="#" class="mb-xs mt-xs mr-xs btn btn-primary" role="button"><i class="fa  fa-arrow-left"
					aria-hidden="true"></i> 上一题 </a>
			<a href="#" class="mb-xs mt-xs mr-xs btn btn-warning" role="button"> 下一题 <i class="fa  fa-arrow-right"
					aria-hidden="true"></i></a>
			<!-- end: page -->
		</section>
	</div>

	<div id="submitexam" class="modal-block mfp-hide">
		<section class="panel">
			<header class="panel-heading">
				<h2 class="panel-title">提示</h2>
			</header>
			<div class="panel-body">
				<div class="modal-wrapper">
					<div class="modal-text">
						<p>确定交卷吗？</p>
					</div>
				</div>
			</div>
			<footer class="panel-footer">
				<div class="row">
					<div class="col-md-12 text-right">
						<button id="dialogConfirm" class="btn btn-primary">确定</button>
						<button id="dialogCancel" class="btn btn-default">取消</button>
					</div>
				</div>
			</footer>
		</section>
	</div>

	<!-- Vendor -->
	<script src="assets/vendor/jquery/jquery.js"></script>
	<script src="assets/vendor/jquery-browser-mobile/jquery.browser.mobile.js"></script>
	<script src="assets/vendor/bootstrap/js/bootstrap.js"></script>
	<script src="assets/vendor/bootstrap-table-master/bootstrap-table.js"></script>
	<script src="assets/vendor/bootstrap-table-master/bootstrap-table-zh-CN.js"></script>
	<script src="assets/vendor/nanoscroller/nanoscroller.js"></script>
	<script src="assets/vendor/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
	<script src="assets/vendor/magnific-popup/magnific-popup.js"></script>
	<script src="assets/vendor/jquery-placeholder/jquery.placeholder.js"></script>

	<!-- Specific Page Vendor -->
	<script src="assets/vendor/select2/select2.js"></script>
	<script src="assets/vendor/jquery-datatables/media/js/jquery.dataTables.js"></script>
	<script src="assets/vendor/jquery-datatables-bs3/assets/js/datatables.js"></script>

	<!-- Theme Base, Components and Settings -->
	<script src="assets/javascripts/theme.js"></script>

	<!-- Theme Custom -->
	<script src="assets/javascripts/theme.custom.js"></script>

	<!-- Theme Initialization Files -->
	<script src="assets/javascripts/theme.init.js"></script>


	<!-- Examples -->
	<script src="assets/javascripts/tables/examples.datatables.editable.js"></script>

	<!-- <script src="assets/javascripts/ui-elements/examples.modals.js"></script> -->
	<!-- 为单选按钮(选中的选项)添加样式 -->
	<script>
		$(function () {
			$(".el-radio-group input").change(function () {
				$(":checked").parent().parent().addClass("is-checked").siblings().removeClass("is-checked");
			});
		});
		// 点击提交试卷弹出模态框
		$('.modal-basic').magnificPopup({
			type: 'inline',
			preloader: false,
			modal: true
		});
	</script>
</body>

</html>